<template>
  <van-search v-model="value" placeholder="请输入搜索关键词"/>
  <van-notice-bar left-icon="volume-o" :scrollable="false" mode="link">
    <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
    >
      <van-swipe-item v-for="item in notices" :key="item.index"
      >{{ item.message }}
      </van-swipe-item>
    </van-swipe>
  </van-notice-bar>
  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image"/>
    </van-swipe-item>
  </van-swipe>

  <van-grid v-for="value in grids" :column-num="grids.length" :key="value">
    <van-grid-item
        v-for="item in value"
        :key="item.key"
        :icon="item.icon"
        :text="item.title"
    />
  </van-grid>
  <van-back-top/>
</template>

<script>
import jpg1 from "../assets/1.jpg";
import jpg2 from "../assets/2.jpg";
import jpg3 from "../assets/3.jpg";
import jpg4 from "../assets/4.jpg";

export default {
  data() {
    return {
      value: "",
      images: [jpg1, jpg2, jpg3, jpg4],
      grids: [
        [
          {index: 1, title: "发现", icon: "star-o"},
          {index: 2, title: "附近", icon: "location-o"},
          {index: 3, title: "热品", icon: "fire-o"},
        ],
        [
          {index: 4, title: "发现", icon: "star-o"},
          {index: 5, title: "附近", icon: "location-o"},
          {index: 6, title: "热品", icon: "fire-o"},
        ],
        [
          {index: 7, title: "发现", icon: "star-o"},
          {index: 8, title: "附近", icon: "location-o"},
          {index: 9, title: "热品", icon: "fire-o"},
        ],
      ],
      notices: [
        {
          index: 1,
          message: "受疫情管控影响,送餐可能存在延迟,请耐心等待!",
        },
        {
          index: 2,
          message: "如账号出现异常,请立即联系管理员进行处理!",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}

img {
  width: 100%;
  object-fit: none;
}
</style>